<template>
  <div class="containers" ref="content">
    <div class="canvas" ref="canvas"></div>
    <!-- 右边属性部分 -->
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import BpmnView from 'bpmn-js/lib/BaseViewer'
// 右边工具栏属性模块
import propertiesPanelModule from 'bpmn-js-properties-panel'
// 左边工具栏配置模块
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModuleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json'

import customTranslate from './customTranslate/customTranslate';
// customTranslate

export default {
  name: "FlowChart",
  // bpmn建模器
  data() {
    return {
      bpmnModeler: null,
      canvas: null
    }
  },
  methods: {
    createNewDiagram() {
      const bpmnXmlStr =
        '<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0fppxr8" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
        '  <bpmn:process id="Process_1" isExecutable="false">\n' +
        '    <bpmn:sequenceFlow id="SequenceFlow_0nrfbee" sourceRef="StartEvent_1" targetRef="Task_0ho18x0" />\n' +
        '    <bpmn:sequenceFlow id="SequenceFlow_00ho26x" sourceRef="Task_0ho18x0" targetRef="Task_1ymuvem" />\n' +
        '    <bpmn:sequenceFlow id="SequenceFlow_18df8vb" sourceRef="Task_1ymuvem" targetRef="EndEvent_1c0ed2n" />\n' +
        '  </bpmn:process>\n' +
        '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
        '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
        '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
        '        <dc:Bounds x="173" y="102" width="36" height="36" />\n' +
        '        <bpmndi:BPMNLabel>\n' +
        '          <dc:Bounds x="178" y="145" width="27" height="27" />\n' +
        '        </bpmndi:BPMNLabel>\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNShape id="Task_0ho18x0_di" bpmnElement="Task_0ho18x0">\n' +
        '        <dc:Bounds x="485" y="244" width="100" height="80" />\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNShape id="Task_1ymuvem_di" bpmnElement="Task_1ymuvem">\n' +
        '        <dc:Bounds x="712" y="391" width="100" height="80" />\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNShape id="EndEvent_1c0ed2n_di" bpmnElement="EndEvent_1c0ed2n">\n' +
        '        <dc:Bounds x="1056" y="568" width="36" height="36" />\n' +
        '        <bpmndi:BPMNLabel>\n' +
        '          <dc:Bounds x="1065" y="611" width="19" height="14" />\n' +
        '        </bpmndi:BPMNLabel>\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNEdge id="SequenceFlow_0nrfbee_di" bpmnElement="SequenceFlow_0nrfbee">\n' +
        '        <di:waypoint x="209" y="120" />\n' +
        '        <di:waypoint x="347" y="120" />\n' +
        '        <di:waypoint x="347" y="284" />\n' +
        '        <di:waypoint x="485" y="284" />\n' +
        '      </bpmndi:BPMNEdge>\n' +
        '      <bpmndi:BPMNEdge id="SequenceFlow_00ho26x_di" bpmnElement="SequenceFlow_00ho26x">\n' +
        '        <di:waypoint x="585" y="284" />\n' +
        '        <di:waypoint x="649" y="284" />\n' +
        '        <di:waypoint x="649" y="431" />\n' +
        '        <di:waypoint x="712" y="431" />\n' +
        '      </bpmndi:BPMNEdge>\n' +
        '      <bpmndi:BPMNEdge id="SequenceFlow_18df8vb_di" bpmnElement="SequenceFlow_18df8vb">\n' +
        '        <di:waypoint x="812" y="431" />\n' +
        '        <di:waypoint x="934" y="431" />\n' +
        '        <di:waypoint x="934" y="586" />\n' +
        '        <di:waypoint x="1056" y="586" />\n' +
        '      </bpmndi:BPMNEdge>\n' +
        '    </bpmndi:BPMNPlane>\n' +
        '  </bpmndi:BPMNDiagram>\n' +
        '</bpmn:definitions>\n'
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
        if (err) {
          console.error(err)
        }
      })
    }
  },
  mounted() {
    var customTranslateModule = {
      translate: ['value', customTranslate]
    }
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas

    // 建模，官方文档这里讲的很详细
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      // 添加控制板(右边属性配置栏部分)
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      // 左边工具栏和右边属性栏配置, 如果只需要左边工具栏可以不添加如下配置，如果需要右边属性栏则需要
      // 进行如下配置
      additionalModules: [
        customTranslateModule,
        // 左边工具栏以及节点
        propertiesProviderModule,
        // 右边的工具栏
        propertiesPanelModule
      ],
      moddleExtensions: {
        camunda: camundaModuleDescriptor
      }
    })
    this.createNewDiagram(this.bpmnModeler)
  }
}
</script>

<style scoped>
/* 左边工具栏的样式 去掉该样式左边工具栏不显示 */
@import '~bpmn-js/dist/assets/diagram-js.css';

/* 左边工具栏内各个工具的样式，不添加该样式，左边工具栏内不显示任何工具 */
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

/*右边工具栏样式*/
@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.canvas {
  width: 100%;
  height: 100%;
}

.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>
